---
import Loader from '../Loader.astro';
import './FrameRenderer.css';
import { Spinner } from '../ReactIcons/Spinner';
import { ProgressNudge } from './ProgressNudge';

export interface Props {
  resourceType: 'roadmap' | 'best-practice';
  resourceId: string;
  dimensions?: {
    width: number;
    height: number;
  };
}

const { resourceId, resourceType, dimensions = null } = Astro.props;
---

<div
  class='mt-3.5'
  id='resource-svg-wrap'
  style={dimensions
    ? `--aspect-ratio:${dimensions.width}/${dimensions.height}`
    : null}
  data-resource-type={resourceType}
  data-resource-id={resourceId}
>
  <div id='resource-loader'>
    <Loader />
  </div>
</div>

<ProgressNudge resourceId={resourceId} resourceType={resourceType} />

<script src='./renderer.ts'></script>
